<template>
<div>
    <div :id="cid" class="barCharts" :style="chartStyle" ></div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
  props: {
    option: {
      type: Object
    },
    chartStyle: {
      type: String
    }
  },
  data() {
    return {
      cid: String(10 * Math.random())
    };
  },
  methods: {
    init() {
      var self = this;
      // setTimeout(() => {
      //   self.myChart.resize();
      // }, 10);
      window.addEventListener(
        "resize",
        () => {
          self.myChart.resize();
        }
      );
    },
    initChart() {
      var self = this;
      if (this.myChart) {
        this.myChart.clear();
        this.myChart.dispose();
      }
      setTimeout(function() {
        self.myChart = echarts.init(document.getElementById(self.cid));
        self.myChart.setOption(self.option);
        self.init();
      }, 10);
    }
  }
};
</script>
<style>
.barCharts {
  /* min-height:10rem; */
  /* min-width:10rem */
}
</style>